<template>
    <div class="bground">
        <el-divider content-position="left" style="font-size: 100px"><p style="font-size: 20px">收藏店铺</p></el-divider>
        <div class="index-seller" v-for="(item,index) in tableData">
            <el-row :gutter="20" >
                <el-col :span="5" @click="toMerchant(index)">
                    <img :src="item.image" style="height: 200px;width: 200px;margin-top: 15px"/>
                </el-col>
                <el-col :span="10" @click="toMerchant(index)">
                    <div class="main">
                        <section class="line-wrapper">
                            <h3 class="shopname" style="font-size: 18px; font-weight: bold; color: #333;">
                                <span>{{item.shopName}}</span>
                            </h3>
                        </section>
                        <section class="line-wrapper" style="font-size: 14px; font-weight: bold; color: #333;">
                            <div>
                                <span class="split" >月售{{item.monthlyNum}}单</span>
                            </div>
                            <div class="moneylimit">
                                <span class="split">￥{{item.dropOffFee}}起送 </span>
                            </div>
                            <div>
                                <span>地址：{{item.provinceName}}{{item.cityName}}{{item.districtName}}</span>
                            </div>
                            <div>
                                <span>{{item.detail}}</span>
                            </div>
                        </section>
                    </div>
                </el-col>
                <el-col :span="4" @click="toMerchant(index)">
                    <div class="timedistanceWrap" style="margin-top:70px;font-size: 14px; font-weight: bold; color: #333;">
                        <span>￥{{item.personAmount}}/人</span><br>
                        <span>电话:{{item.shopTelephone}}</span>
                    </div>
                </el-col>
                <el-col :span="4">
                        <div class="timedistanceWrap" style="text-align: center;margin-top: 80px;margin-left: 50px">
                            <el-button
                                    link
                                    type="primary"
                                    size="small"
                                    @click="deleteRow(item.id,index)"
                            >
                                移除
                            </el-button>
                        </div>
                </el-col>
            </el-row>
        </div>


    </div>

</template>

<script setup>
    import {onMounted, ref} from 'vue'
    import {getAllShop,deleteShop} from "../api/collect";

    import state from "../store";
    import store from "../store";
    import {deleteMyOrder, getMonthlyNum, getPersonAmount} from "../api/order";
    import {useRoute, useRouter} from "vue-router";
    import {ElMessage, ElMessageBox} from "element-plus";
    const tableData=ref([])

    const router = useRouter()

    onMounted(async () => {
        const id=ref(store.getters.getId)
        await getAllShop({id:id.value}).then((res)=>{
            tableData.value=res.data
            for(let i=0;i<res.data.length;i++){
                getPersonAmount({id:tableData.value[i].id}).then(res=>{
                    tableData.value[i].personAmount=res.data;
                })
                getMonthlyNum({id:tableData.value[i].id}).then(res=>{
                    tableData.value[i].monthlyNum=res.data;
                })
            }
        })
    })
    //跳转到merchantHome
    const toMerchant=(index)=>{
        //配送费未加
        //
        //
        //
        state.commit("saveMerchantId",tableData.value[index].id)
        router.push({path:'/merchanthome'})
    }
    const deleteRow = (merchantId,index) => {

        ElMessageBox.confirm(
            '收藏店铺将被移除，确认操作?',
            '提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        ).then(() => {
            const id=ref(store.getters.getId)
            deleteShop({userId:id.value,merchantId}).then((res)=>{
                tableData.value.splice(index, 1)
            })
            ElMessage({
                type: 'success',
                message: '成功删除收藏店铺',
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除收藏店铺',
            })
        })

    }




</script>
<style>
    .bground{
        width: 100%;
        background-color:rgba(0, 191, 255, 0.2);
        border: 1px solid #ccc;
        border-radius: 10px;
        /*background-image: url('../../views/slider-pic/bizhi4.png');*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .index-seller .loading-wrapper, .noMore-wrapper{
        text-align: center;
        color: #555;
        line-height: 1.06rem;
    }
    .index-seller {
        background-color: rgba(0, 191, 255, 0.1);
        border: 1px solid rgba(0, 191, 255, 0.5);
    }

    .main {
        border: 1px solid rgba(0, 191, 255, 0.5);
        margin-top: 25px;
        padding: 10px;
    }

    .price-border {
        border: 1px solid rgba(0, 191, 255, 0.5);
        padding: 5px;
        margin-top: 10px;
    }

    .price {
        font-size: 18px;
        color: rgba(0, 191, 255, 0.8);
    }

    .timedistanceWrap {
        border: 1px solid rgba(0, 191, 255, 0.5);
        padding: 10px;
        margin-top: 10px;
    }
</style>